{extends file="parent/layout.tpl"}
{block name=title}{$title}{/block}
{block name=head}
<style type="text/css">
ul#profileTabs{
margin:0;
padding:0;
list-style:none;
width:240px;
}
ul#profileTabs li{
background-color:#eee;
}
ul#profileTabs li a{
color:#7b7b7b;
text-decoration:none;
display:block;
padding:10px;
}
ul#profileTabs li.active a{
background-color:#f2f2f2;
}
ul#profileTabs li a:hover{
background-color:#f2f2f2;
}
h2{
margin:0;
padding:0;
}
div#col1 .box{
margin-bottom:10px;
}
</style>
{/block}
{block name=body}
    <h1>Profile</h1>
	{if !empty({$notice})}
	<div class="notice">
		<p>{$notice}</p>
	</div>
	{/if}
	<div id="profile" style="width:800px;margin:0 auto;">
		<div id="col1" style="width:230px;padding:10px;float:left;background-color:#eaeaea;">
			<div class="box"><h2>{$userData->first_name} {$userData->last_name}</h2></div>
			<div class="box"><img src="/_static/images/profile.png" alt="Profile Pic" style="width:230px;height:230px;"></div>
			<div class="box">Level: 5</div>
			<div>
				<ul id="profileTabs">
					<li{if $page == 'overview'} class="active"{/if}><a href="/profile/{$userData->username}">Overview</a></li>
					<li{if $page == 'todo'} class="active"{/if}><a href="/profile/{$userData->username}/todo">TODO Achievements ({$todoAchievementsCount})</a></li>
					<li{if $page == 'completed'} class="active"{/if}><a href="/profile/{$userData->username}/completed">Completed Achievements ({$completedAchievementsCount})</a></li>
					<li{if $page == 'friends'} class="active"{/if}><a href="/profile/{$userData->username}/friends">Friends ({$friendsCount})</a></li>
				</ul>
			</div>
		</div>
		<div id="col2" style="height:900px;width:530px;padding:10px;float:left;background-color:#f2f2f2;">
			{if $page == 'friends'}
				<h2>Friends</h2>
				{if count($friendsList) eq 0}
					<p>Friends list is empty.</p>
				{else}
					<ul>
					{foreach $friendsList as $friend}
						<li>{$friend->friendUsername}</li>
					{/foreach}
					</ul>
				{/if}
			{else if $page == 'todo'}
				<h2>TODO Achievements</h2>
			{else if $page == 'completed'}
				<h2>Completed</h2>
			{else if $page == 'overview'}
				<h2>Overview</h2>
			{/if}
		</div>
	</div>
{/block}